<template>
  <!-- 最后一个三级联动 -->
  <div class="search-cascader"><span class="area-select-span">{{temp}}</span>
    <el-cascader
      clearable
      :changeOnSelect="changeOnSelect ? false : true"
      :options="areaArray"
      v-model="selectedCityOptions"
      @change="cityAreaChange">
    </el-cascader>
  </div>
</template>

<script>
  import com from '../../js/common'

  export default {
    name: "areaSelect",
    data() {
      return {
        selectedCityOptions: [],
        areaArray: [],
        areaCode: ''
      }

    },
    props: ['areaText', 'defaultArea', 'changeOnSelect', 'childArea'],
    computed: {
      temp() {
        return this.areaText
      },
    },
    created() {
      // this.getAddressByBackCode()
      this.getAreaArray()
    },
    mounted() {
      this.getAddressByBackCode()
    },
    methods: {
      // 获取回显code
      getAddressByBackCode() {
        if (this.areaCode) {
          this.selectedCityOptions = com.getAreaCodeArr(this.areaCode)
        } else {
          this.selectedCityOptions = []
        }
      },
      // 获取包括父级信息
      getCascaderObj(val, opt) {
        return val.map(function (value, index, array) {
          for (let itm of opt) {
            if (itm.value == value) {
              opt = itm.children;
              return itm;
            }
          }

          return null;
        });
      },
      // 选择城市时
      cityAreaChange(val) {
        // 当重置为空时length,代码执行出差错
        if (val.length > 0) {
          // 遍历获取当前选中元素参数包括level 以及code
          const nowSelectArr = this.getCascaderObj(this.selectedCityOptions, this.areaArray)

          const nowSelectObj = nowSelectArr[nowSelectArr.length - 1]
          // 获取城市code(之前为了一个全部的参数)
          const nowAreaCodeArr = nowSelectObj.value.split('_')
          const nowAreaSelectCode = nowAreaCodeArr[nowAreaCodeArr.length - 1]
          // 城市code 与level
          const areaMag = {
            code: nowAreaSelectCode,
            level: nowSelectObj.level,
          }
          // 获取当前选中的最后一栏数据
          this.$emit('getNowAreaPosition', areaMag)
          // 获取当前选择的所有栏目数据
          this.$emit('getAreaArr', nowSelectArr)
        } else {
          this.$emit('getNowAreaPosition', {
            code: '',
            level: '',
            text: ''
          })
          this.$emit('getAreaArr', [])
        }
      },
      // 获取搜索信息
      getAreaArray() {
        com.axio.get(`${com.basePath}/usercenter-web/area/listLimit`).then((data) => {
          this.areaArray = data.data.data;
        })
      },

      // 获得区域code设置默认地址
      getDefaultCode(resCode) {
        this.areaCode = resCode;
        this.getAddressByBackCode();
      }
    }
  }
</script>

<style lang="scss" type="text/scss">
  @import "../../style/base/_base.scss";

  .el-cascader-menus {
    .el-cascader-menu {
      li {
        display: flex;
      }
    }
  }

  .el-input__inner {
    height: 26px;
    line-height: 26px;
  }

  .search-cascader {
    margin-left: 3px;
    width: 300px;
    height: 26px;
    line-height: 26px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-top: 8px;
    align-items: center;
    font-size: 12px !important;
  }

  .el-cascader {
    font-size: 12px;
  }

  .area-select-span {
    flex-shrink: 0;
    width: $label-width;
    text-align: right;
  }
</style>
